<script setup>
import {ref, onMounted, computed} from 'vue';
import * as echarts from 'echarts';
import { UserFilled } from '@element-plus/icons-vue';
import {useStore} from "vuex";
import cache from "@/utils/cacheGetter.js"
import api from "@/api/index.js";

const store = useStore();

const authorProfile = computed(
    {
      get() {
        return authorProfile.value = cache.get('user/authorProfile',store.getters?.currentUser?.userId)
      },
      set(value) {}
    }
)

const fetchRank = ()=>{
  api.get('user/author/resourceRank/'+store.getters?.currentUser?.userId).then(resp=>{
    initBarChart(resp.data);
  })
}
const fetchTagMapping = ()=>{
  api.get('user/author/resourceTagCount/'+store.getters?.currentUser?.userId).then(resp=>{
    initPieChart(resp.data);
  })
}


// 初始化 ECharts 图表
onMounted(() => {
  fetchRank()
  fetchTagMapping()

});

// 初始化条形图
function initBarChart(data) {
  const names = data.map(item => item.name);
  const values = data.map(item => item.value);
  const chartDom = document.getElementById('bar-chart');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '资源评分排行榜', // 添加标题
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
      },
    },
    xAxis: {
      type: 'category',
      data: names,
      axisLabel: {
        rotate: -30,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: values,
        type: 'bar',
        itemStyle: {
          color: '#89b50d',
        },
      },
    ],
  };
  myChart.setOption(option);
}

// 初始化饼图
function initPieChart(data) {
  const chartDom = document.getElementById('pie-chart');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '发布资源的标签占比', // 添加标题
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
      },
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: data,
      },
    ],
  };
  myChart.setOption(option);
}
</script>

<template>
  <div class="author-dashboard">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>创作者仪表盘</span>
          <el-icon><UserFilled /></el-icon>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="12">
          <div id="bar-chart" style="width: 100%; height: 400px;"></div>
        </el-col>
        <el-col :span="12">
          <div id="pie-chart" style="width: 100%; height: 400px;"></div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div class="data-summary">
        <p>你在该平台上传了 <strong>{{ authorProfile?.uploadCount }}</strong> 个资源。</p>
        <p>总共有 <strong>{{ authorProfile?.collectedCount }}</strong> 个用户对你发布的资源感兴趣。</p>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.author-dashboard {
  padding: 20px;
  margin: 20px 15%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.data-summary {
  text-align: center;
  margin-top: 20px;
}
/* 入场动画 */
.author-dashboard {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>